<template>
   <div id="listcontent">
     <ul id="container">
       <li v-for="(item,key) in listcontent" :key="key">
         <img v-lazy.container="item.AppCover" alt="显示失败">
          <div class="time">
               <p>距截单
                 <span>{{currentTime1}}</span>
                 <span>{{currentTime2}}</span>时
                 <span>{{currentTime3}}</span>
                 <span>{{currentTime4}}</span>分
                 <span>{{currentTime5}}</span>
                 <span>{{currentTime6}}</span>秒
                 <span>{{currentTime7}}</span>
               </p>
          </div>
          <div class="text-content">
              <h4>{{item.Name}}</h4>
          </div>
          <div class="list">
            <p v-for="(items,key) in count(item)" :key="key">{{items}}</p>
          </div>
       </li>
       <div class="text">我是有底线的</div>
     </ul>
   </div>
</template>
<script>
export default {
  data() {
    return {
      currentTime1: "",
      currentTime2: "",
      currentTime3: "",
      currentTime4: "",
      currentTime5: "",
      currentTime6: "",
      currentTime7: ""
    };
  },
  props: {
    listcontent: {
      type: [Array]
    },
    listdataUrl: {
      type: String
    },
    times: {
      type: String
    }
  },
  created() {
    var _this = this;
    setInterval(function() {
      var toTime = _this.times;
      toTime = toTime.replace(/-/g, "/");
      var toTimeDate = new Date(toTime);
      var currentTime = new Date();
      var timeRemain = toTimeDate - currentTime;

      _this.currentTime1 = parseInt(timeRemain / 1000 / 3600 / 10); //时
      _this.currentTime2 = parseInt((timeRemain / 1000 / 3600) % 10);

      _this.currentTime3 = parseInt(((timeRemain / 1000) % 3600) / 60 / 10); //分
      _this.currentTime4 = parseInt((((timeRemain / 1000) % 3600) / 60) % 10);

      _this.currentTime5 = parseInt(((timeRemain / 1000) % 60) / 10); //秒
      _this.currentTime6 = parseInt(((timeRemain / 1000) % 60) % 10);

      _this.currentTime7 = parseInt((timeRemain % 1000) / 100); //毫秒
    }, 100);
    var _this = this;
    // 发送请求,请求新的数据
    var url = this.listdataUrl + "&debug=1&pageIndex=1&pageSize=100";
    this.$http
      .get(url)
      .then(result => {
        _this.toTime = result.data.Data.ActivityList[0].ToTime;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    count(item) {
      return item.Description.split("\n");
    }
  }
};
</script>
<style lang="scss" scoped>
#listcontent {
  ul {
    width: 100%;
    position: absolute;
    top: 140px;
    margin-bottom: 50px;
    li {
      width: 100%;
      min-height: 320px;
      background: white;
      position: relative;
      border-bottom: 7px solid #eeeeee;
      img {
        width: 100%;
        height: 185px;
      }
      .time {
        width: 65%;
        height: 34px;
        background: #cc2d29;
        position: absolute;
        top: 167px;
        left: 60px;
        border-radius: 25px;
        padding: 6px;
        p {
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            width: 13px;
            margin-left: 5px;
            justify-content: center;
            align-items: center;
            background: black;
          }
        }
      }
      h4 {
        margin-top: 15px;
        font-size: 15px;
        padding: 9px;
        box-sizing: border-box;
      }
      .list {
        font-size: 12px;
        p {
          padding-left: 9px;
          margin: 0;
        }
      }
    }
    .text {
      display: flex;
      height: 20px;
      justify-content: center;
      align-items: center;
      font-style: italic;
      font-size: 13px;
      color: gray;
      background: white;
    }
  }
}
</style>


